<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <!-- <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item> -->
      <el-breadcrumb-item>收入情况</el-breadcrumb-item>
      <el-breadcrumb-item>油卡</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <!-- <div>
        <div class="types">
          <div>
            <div>日期</div>
            <div v-for='(item,index) in nameData'
                 :key='index'>{{item}}</div>
            <div>总收入</div>
          </div>
        </div>
        <div class="types">
          <div v-for='(item,index) in dds'
               :key="index">
            <div>{{item.date| dateFormat}}</div>
            <div v-for='(items,indexs) in nameData'
                 :key='indexs'>{{item[indexs]}}</div>
            <div>{{item.total}}</div>
          </div>
        </div>
      </div> -->
      <el-table :data='dataShow'
                border
                stripe>
        <el-table-column type="index"></el-table-column>
        <el-table-column prop="date"
                         label='日期'>
          <template slot-scope="scope">
            {{scope.row.date | dateFormat}}
          </template>
        </el-table-column>
        <el-table-column :prop="index"
                         :label='item'
                         v-for='(item,index) in nameData'
                         :key='index'>
        </el-table-column>
        <el-table-column prop="total"
                         label='总收入'>
        </el-table-column>
        <el-table-column fixed="right"
                         label="操作"
                         width="50">
          <template slot-scope="scope">
            <el-button type="text"
                       size="small"
                       @click="edit(scope.row.stringDate)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination background
                     layout="total, sizes,prev, pager, next"
                     :total="total"
                     :page-size="pageSize"
                     :page-sizes="[30, 40, 50, 20]"
                     :pager-count="11"
                     :current-page='currentPage'
                     @size-change="handleSizeChange"
                     @current-change="handleCurrentChange">

      </el-pagination>
      <!-- <el-table :data='dataShow'
                border
                stripe>
        <el-table-column type="index"></el-table-column>
        <el-table-column prop="date"
                         label='日期'>
          <template slot-scope="scope">
            {{scope.row.date | dateFormat}}
          </template>
        </el-table-column>
        <el-table-column prop="wanneng"
                         label='万能'>
        </el-table-column>
        <el-table-column prop="huihui"
                         label='汇惠'>
        </el-table-column>

       -->
      <el-row class="excel">
        <el-button type="primary"
                   @click="exportExcel">数据导出</el-button>
      </el-row>
    </el-card>

    <!--------编辑对话框--------->
    <el-dialog title="编辑数据"
               :visible.sync="editShow"
               width="30%"
               @close="editDialogClosed">
      <el-form ref="editDataFormRef"
               :model="editForm"
               :rules='editCardRule'>
        <el-form-item :prop="index"
                      :label='item'
                      v-for='(item,index) in nameData'
                      :key='index'>
          <el-input v-model="editForm[index]"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="editShow = false">取 消</el-button>
        <el-button type="primary"
                   @click="editCardData">确 定</el-button>
      </span>
    </el-dialog>
    <!-- <el-dialog title="编辑数据"
               :visible.sync="editShow"
               width="30%"
               @close="editDialogClosed">
      <el-form ref="editDataFormRef"
               :model="editForm"
               :rules='editCardRule'>
        <el-form-item label="万能卡"
                      prop="wanneng">
          <el-input v-model="editForm.wanneng"></el-input>
        </el-form-item>      
      </el-form>      
    </el-dialog> -->
  </div>
</template>
<script>
import { isNumber } from '../plugins/validate'
import FileSaver from 'file-saver'
import XLSX from 'xlsx'
export default {
  data () {
    return {
      datas: [],
      compareForm: {
        data0: 0
      },
      dds: [],
      nameData: {},
      editForm: {
      },
      editCardRule: {
        data0: [
          { required: true, message: '不能为空哟！' },
          { validator: isNumber, message: '只能输入数字，整数或小数' }
        ],
        data1: [
          { required: true, message: '不能为空哟！' },
          { validator: isNumber, message: '只能输入数字，整数或小数' }
        ],
        data2: [
          { required: true, message: '不能为空哟！' },
          { validator: isNumber, message: '只能输入数字，整数或小数' }
        ],
        data3: [
          { required: true, message: '不能为空哟！' },
          { validator: isNumber, message: '只能输入数字，整数或小数' }
        ],
        data4: [
          { required: true, message: '不能为空哟！' },
          { validator: isNumber, message: '只能输入数字，整数或小数' }
        ],
        data5: [
          { required: true, message: '不能为空哟！' },
          { validator: isNumber, message: '只能输入数字，整数或小数' }
        ],
        data6: [
          { required: true, message: '不能为空哟！' },
          { validator: isNumber, message: '只能输入数字，整数或小数' }
        ],
        data7: [
          { required: true, message: '不能为空哟！' },
          { validator: isNumber, message: '只能输入数字，整数或小数' }
        ]
      },
      //数据总条数
      total: 0,
      //当前页
      currentPage: 1,
      //一共多少页
      pageNum: 1,
      //当前页中的数据
      dataShow: [],
      //根据页数对数据分组，并存进每一页
      totalPage: [],
      //每页多少条
      pageSize: 30,
      //将数据转为数组
      dataArray: [],

      editShow: false,
      nameExcel: [],
      titelExcel: []
    }
  },
  created () {
    this.findall()
  },
  methods: {
    //查询所有数据   
    async findall () {
      this.dds = []
      let url = '/api/findCardm'
      const { data: res } = await this.$http.get(url)
      this.nameData = res[res.length - 1]
      for (let i = 0; i < (res.length - 1); i++) {
        this.dds.push(res[i])
      }
      this.editForm["stringDate"] = ''
      this.editForm.date = new Date()
      this.nameExcel[0] = '日期'
      this.titelExcel[0] = 'stringDate'

      for (let item in this.nameData) {
        this.$set(this.editForm, item, 0)
        this.nameExcel.push(this.nameData[item])
        this.titelExcel.push(item)
      }
      this.total = res.length - 1
      this.nameExcel.push('总收入')
      this.titelExcel.push('total')
      this.pageData()
    },
    //编辑某天的数据,先查询当天的数据
    edit (date) {
      this.editShow = true
      for (let i = 0; i < this.dds.length; i++) {
        // this.nameData
        if (this.dds[i].stringDate === date) {
          for (let item in this.nameData) {
            console.log(item)
            // this.editForm[item] = this.dds[i][item]
            this.$set(this.editForm, item, this.dds[i][item])
          }
          this.editForm.date = this.dds[i].date
          console.log(this.dds[i].date)
        }
      }
      this.editForm.stringDate = date
    },
    //确定编辑数据
    editCardData () {
      this.$refs.editDataFormRef.validate(valid => {
        // let flags = this.$common.compare(this.compareForm, this.editForm)
        // if (flags) return
        if (!valid) return
        this.editShow = false
        let dates = this.editForm.stringDate;
        let totals = 0
        for (let item in this.nameData) {
          totals += Number(this.editForm[item])
        }
        let url = '/api/editCardm'
        for (let item in this.nameData) {
          let items = {
            stringDate: dates,
            name: this.nameData[item],
            datas: this.editForm[item],
            totals: totals,
            date: this.editForm.date
          }
          this.$http.post(url, this.$qs.stringify(items)).then(res => {
            if (res.status === 200) {
              // this.$common.succ('恭喜，编辑成功！')

            } else {
              // this.$common.fail('恭喜，编辑成功！')
            }
          })
        }
        this.$common.succ('恭喜，编辑成功！')
        this.findall()
      })
    },
    //计算分页，及存入数据
    pageData () {
      //计算页数
      this.pageNum = Math.ceil(this.dds.length / this.pageSize) || 1
      //根据页数对数据分组，并存进每一页
      for (let i = 0; i < this.pageNum; i++) {
        // 每一页都是一个数组 形如 [['第一页的数据'],['第二页的数据'],['第三页数据']]
        // 根据每页显示数量 将后台的数据分割到 每一页,假设pageSize为5， 则第一页是1-5条，即slice(0,5)，第二页是6-10条，即slice(5,10)...
        let das = []
        for (let j = 0; j < this.pageSize; j++) {
          if ((this.pageSize * i + j) < (this.dds.length)) {
            das[j] = this.dds[this.pageSize * i + j]
          }
        }
        this.totalPage[i] = das
      }
      this.dataShow = this.totalPage[this.currentPage - 1]
    },
    handleSizeChange (newSize) {

      this.pageSize = newSize
      // this.dataShow = this.totalPage[this.currentPage - 1]
      this.pageData()
    },
    //分页，修改页码时的设置
    handleCurrentChange (newPage) {
      this.currentPage = newPage
      this.dataShow = this.totalPage[this.currentPage - 1]
    },
    //关闭新增数据对话框同时把数据清空
    addressDialogClosed () {
      this.$refs.dataFormRef.resetFields()
    },
    editDialogClosed () {
      this.$refs.editDataFormRef.resetFields()
    },
    exportExcel () {
      // const tHeader = ['日期', '万能', '汇惠', '吕昌', '中天', '国卡', '结余'];
      const tHeader = this.nameExcel;
      // const filterVal = ['stringDate', 'wanneng', 'huihui', 'lvchang', 'zhongtian', 'guoka', 'totals'];
      const filterVal = this.titelExcel;
      const title = '油卡使用记录'
      const list = this.dds
      this.$common.export2Excel(tHeader, filterVal, list, title)
    },
  },
}
</script>
<style scoped>
.el-pagination {
  padding-top: 30px;
}
.types > div {
  display: flex;
  justify-content: space-between;
}
.types > div > div {
  width: 15%;
  text-align: left;
}
</style>